<template>
  <div class="login_container">

    <el-row>
      <el-col :span="12" :xs="0">123</el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login_form" :model="loginForm" :rules="rules"  ref="ruleFormRef">
          <h1>Hello</h1>
          <h2>www。兰玉臣。com</h2>
          <el-form-item prop="username">
            <el-input placeholder="请输入用户名" v-model="loginForm.username" :prefix-icon="User"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="请输入密码" v-model="loginForm.password" :prefix-icon="Lock"
              :show-password="true"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="login_bnt" @click="login(ruleFormRef)" :loading="loading">登录</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

  </div>

</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import uesUserStore from '@/store/modules/user'
import { useRouter } from 'vue-router'
import { ElNotification } from 'element-plus';
import type { FormInstance } from 'element-plus'

//引入获取当前时间的函数
import { getTime } from '@/utils/time';
let userStore = uesUserStore()
const router = useRouter()
let loginForm = reactive({
  username: "admin",
  password: ""
})
let loading = ref(false)
const ruleFormRef = ref<FormInstance>()


const validateUser= (rule: any, value: any, callback: any) => {
  if (value.length >= 5) {
    callback();
  } else {
    callback(new Error('账号长度至少五位'));
  }
  }
  const validatePass= (rule: any, value: any, callback: any) => {
    if (value.length >= 5) {
    callback();
  } else {
    callback(new Error('账号长度至少五位'));
  }
  }
// b表单校验
const rules ={
  username: [{ validator: validateUser, trigger: 'change' }],
  password: [{ validator: validatePass, trigger: 'change' }],
}


//登录按钮回调
const login =  (formEl:any) => {
  loading.value = true;

  formEl.validate(async (valid:any) => {
    if (valid) {
      const result = await userStore.userLogin(loginForm)

      if (result === 'ok') {
    router.push('/home')
    ElNotification({
      type: 'success',
      message: '欢迎回来',
      title: `HI,${getTime()}好`
    }
    )
    loading.value = false;
  } else {
    ElNotification({
      type: "error",
      message: "登录失败",
    }
    )
    loading.value = false;
  }

    } else {
      console.log('error submit!')
      loading.value = false;
      return false
    }



 

 


 
}
)}
</script>
<style scoped lang="scss">
.login_container {
  width: 100%;
  height: 100vh;
  background-image: url('@/assets/images/background.jpg');
  background-size: cover;
  padding: 40px;

  .login_form {
    position: relative;
    width: 80%;
    height: 30vh;
    top: 30vh;
    background-image: url('@/assets/images/login_form.png');

    h1 {
      color: wheat;
      font-size: 40px;
      margin: 20px;
    }

    h2 {
      color: wheat;
      font-size: 20px;
      margin: 20px;
    }

    .login_bnt {
      width: 100%;
    }
  }
}
</style>
